import React, { FC, useState } from 'react';
import { Drawer, Button } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import useEntryModel from '@/pages/Entry/useEntryModel';

interface Props {
  [key: string]: any;
}
const DrawerComponent: FC<Props> = ({ placement = 'left', ...rest }) => {
  const [visible, setVisible] = useState<boolean>(false);
  const { windowSize } = useEntryModel((model) => [model.windowSize]);

  const onClose = () => {
    setVisible(false);
  };

  const DefaultButton = React.forwardRef(() => {
    return (
      <div style={{ right: '-29px' }} className={styles['handle-wrap']}>
        <Button
          onClick={() => {
            setVisible(!visible);
          }}
        >
          {!visible ? <IconFont type={'iconzhankai'} /> : <IconFont type={'iconshousuo'} />}
        </Button>
      </div>
    );
  });
  return (
    <>
      {['xl', 'xxl'].includes(windowSize) ? (
        <>{rest.children}</>
      ) : (
        <Drawer
          placement={placement}
          handler={<DefaultButton />}
          key={placement}
          width={visible ? 256 : 0}
          maskStyle={{ background: 'transparent' }}
          getContainer={false}
          className={styles['drawer-wrap']}
          closable={false}
          onClose={onClose}
          visible={visible}
          style={{ position: 'absolute' }}
          {...rest}
        >
          {rest.children}
        </Drawer>
      )}
    </>
  );
};

export default DrawerComponent;
